<template>
  <div>
      <nva-bar class="home-nva_deta">
      <div slot="left" @click="backClick">
          <img src="@/assets/img/common/返回.png" alt="">
      </div>
      <div slot="center" class="title">
          <div v-for="(ltem,index) in titles" :key="index" @click="titleclick(index)" :class="{redd:currentIndex===index}">{{ltem}}</div>
      </div>
      <div slot="right"></div>
    </nva-bar>
  </div>
</template>

<script>
import NvaBar from '@/components/common/nvabar/NvaBar.vue'
export default {
    name:"DetailNavBar",
    components:{
        NvaBar
    },
    data() {
        return {
            titles:["商品","参数","评论","推荐"],
            currentIndex:0
        }
    },
    methods:{
        backClick(){
            this.$router.back()
            // back也可以
        },
        titleclick(index){
            this.currentIndex=index
            this.$emit('titleclick',index)
        }
    }
}
</script>

<style>

.home-nva_deta div{
  color: #000;
}
.title{
    display: flex;
}
.title div{
    flex: 1;
    font-size: 13px;
}
.home-nva_deta .redd{
    color: var(--color-high-text);
}
.home-nva_deta img{
    width: 45%;
    margin-top: 9px;
    margin-left: 10px;
}
</style>